<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  /**
 * Bouncing animation
 */
  
  @keyframes bounce {
    60%,
    80%,
    to {
      transform: translateY(400px);
      animation-timing-function: ease;
    }
    70% {
      background: green;
      transform: translateY(300px);
    }
    90% {
      background: red;
      transform: translateY(360px);
    }
  }
  
  .ball {
    width: 0;
    height: 0;
    padding: 1.5em;
    border-radius: 50%;
    margin: auto;
    background: red radial-gradient(at 30% 30%, #fdd, red);
    animation: bounce 20s cubic-bezier(.1, .25, 1, .25) forwards;
  }
  
  body {
    background: linear-gradient(skyblue, white 450px, yellowgreen 0);
    min-height: 100vh;
  }
</style>

<body>
  <div class="ball"></div>
</body>

</html>